<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">

<head>
    <meta charset="utf-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>机主报修</title>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="../../../../plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../../dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="../../../../plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <link href="../../../../dist/css/fonts.css" rel="stylesheet">
    <style type="text/css">
        .file {
            width: 100px;
            height: 100px;
            position: relative;
            margin-left: 10px;
        }

        #upload {
            opacity: 0;
            position: absolute;
            width: 100px;
            height: 100px;
            top: 0;
            left: 0
        }

        .content-img-list {
            display: flex;
        }

        .content-img-list-item {
            width: 100px;
            height: 100px;
        }

        ul {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }

        ul li {
            background-repeat: no-repeat;
            background-position: 0px 5px;
        }

        .showIcon {
            pointer-events: none;
            width: 100px;
            height: 25px;
            position: absolute;
            top: 75px;
            background-color: black;
            opacity: 0.7;
            text-align: center;
        }
    </style>
</head>

<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light" id="navbar_menu">
            <!-- Left navbar links -->
        </nav>
        <!-- /.navbar -->
        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4" id="sidebar_menu">
        </aside>
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1 class="m-0 text-dark">机主报修</h1>
                        </div><!-- /.col -->

                    </div><!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <div class="content">
                <!-- Input addon -->
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">报修表</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form class="form-horizontal" method="post">
                        <div class="card-body">
                            <div class="form-group row">
                                <label for="name" class="col-sm-2 col-form-label" style="text-align: center;">称呼</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入称呼">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="gender" class="col-sm-2 col-form-label" style="text-align: center;">
                                    性别</label>
                                <div class="col-sm-10">
                                    <div class="row"
                                        style="margin-left: 0;height:30px;position: absolute; top:50%;margin-top: -15px;">
                                        <div class="form-check" style="justify-content: center;">
                                            <input class="form-check-input" type="radio" id="male" name="gender" checked
                                                value="男">
                                            <label class="form-check-label" for="male">男</label>

                                        </div>
                                        <div class="form-check" style="margin-left: 10px;">
                                            <input class="form-check-input" type="radio" id="female" name="gender"
                                                value="女">
                                            <label class="form-check-label" for="female">女</label>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="address" class="col-sm-2 col-form-label" style="text-align: center;">
                                    地址</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="address" name="address"
                                        placeholder="请输入地址">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="way" class="col-sm-2 col-form-label" style="text-align: center;">
                                    报修方式</label>
                                <div class="col-sm-10">
                                    <div class="row"
                                        style="margin-left: 0;height:30px;position: absolute; top:50%;margin-top: -15px;">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="way" id="online" checked
                                                value="线上">
                                            <label class="form-check-label" for="online">线上报修</label>

                                        </div>
                                        <div class="form-check" style="margin-left: 10px;">
                                            <input class="form-check-input" type="radio" id="offline" name="way"
                                                value="线下">
                                            <label class="form-check-label" for="offline">线下报修</label>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="model" class="col-sm-2 col-form-label" style="text-align: center;">
                                    电脑型号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="model" id="model"
                                        placeholder="请输入电脑型号">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="detail" class="col-sm-2 col-form-label" style="text-align: center;">
                                    问题描述</label>
                                <!-- textarea -->
                                <div class="col-sm-10">
                                    <textarea class="form-control" rows="3" id="detail" name="detail"
                                        placeholder="请描述你遇到的问题"></textarea>
                                </div>
                            </div>

                            <!-- <div class="form-group row">
                                <label for="picture" class="col-sm-2 col-form-label" style="text-align: center;">
                                    上传图片</br>百度云分享链接及密码 </label>
                            
                                <div class="col-sm-10">
                                    <textarea class="form-control" rows="3" id="picture" name="picture"
                                        placeholder="请输入百度云图片分享链接"></textarea>
                                </div>
                            </div> -->

                            <!-- 上传图片模块 -->
                            <div class="form-group row">
                                <label for="inputPassword3" class="col-sm-2 col-form-label" style="text-align: center;">
                                    <br />上传图片 <br /> (支持jpg/png/gif,图片大小不超过3m,数量不超过3张) </label>


                                <div class="col-sm-10">
                                    <div class="content-img" style="display: flex;">
                                        <ul class="content-img-list">

                                        </ul>
                                        <div class="file">
                                            <i class="fas fa-plus fa-6x" style="color:#ced4da;"></i>
                                            <input type="file" name="file" accept="image/gif,image/jpeg,image/jpg,image/png" id="upload" multiple>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- /.card-body -->
                        <!-- /.card-footer -->
                    </form>
                    <div class="card-footer">
                        <button class="btn btn-primary float-right" type="button" data-toggle="modal"
                            data-target="#modal_detail" id="checkInfo">提交</button>
                    </div>
                </div>
            </div>
            <!-- /.content -->
        </div>

        <!-- /.content-wrapper -->
        <!-- ./wrapper -->
        <div class="modal fade" id="modal_detail">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">工单详情</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <section class="content">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="callout callout-info">
                                            <h5><i class="fas fa-info"></i> 个人信息</h5>

                                            <div class="row">
                                                <label class="col-sm-2 col-form-label" style="text-align: center;">
                                                    姓名</label>
                                                <!-- textarea -->
                                                <div class="col-sm-10 col-form-label" id="check_name">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-2 col-form-label" style="text-align: center;">
                                                    性别</label>
                                                <!-- textarea -->
                                                <div class="col-sm-10 col-form-label" id="check_gender">
                                                </div>
                                            </div>

                                            <div class="row">
                                                <label class="col-sm-2 col-form-label" style="text-align: center;">
                                                    地址</label>
                                                <!-- textarea -->
                                                <div class="col-sm-10 col-form-label" id="check_address">
                                                </div>
                                            </div>
                                        </div>


                                        <!-- Main content -->
                                        <div class="invoice p-3 mb-3">
                                            <!-- title row -->
                                            <div class="row">
                                                <div class="col-12">
                                                    <h4>
                                                        <i class="fas fa-paperclip"></i> 任务信息
                                                    </h4>
                                                </div>
                                                <!-- /.col -->
                                            </div>
                                            <!-- info row -->
                                            <div class="row">
                                                <label class="col-sm-2 col-form-label" style="text-align: center;">
                                                    报修方式</label>
                                                <!-- textarea -->
                                                <div class="col-sm-10 col-form-label" id="check_way">

                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-2 col-form-label" style="text-align: center;">
                                                    电脑型号</label>
                                                <!-- textarea -->
                                                <div class="col-sm-10 col-form-label" id="check_model">

                                                </div>
                                            </div>

                                            <div class="row">
                                                <label class="col-sm-2 col-form-label" style="text-align: center;">
                                                    问题描述</label>
                                                <!-- textarea -->
                                                <div class="col-sm-10 col-form-label" id="check_detail">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <label class="col-sm-2 col-form-label" style="text-align: center;">
                                                    图片信息</label>
                                                <!-- textarea -->
                                                <!-- <div class="col-sm-10 col-form-label" id="check_picture">
                                                </div> -->
                                                <div class="col-sm-10">
                                                    <div class="content-img" style="display: flex;">
                                                        <ul class="content-img-list_show" style="display: flex;">

                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.invoice -->
                                    </div><!-- /.col -->
                                </div><!-- /.row -->
                            </div><!-- /.container-fluid -->
                        </section>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="submitForm">提交</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- REQUIRED SCRIPTS -->
        <!-- jQuery -->

        <script src="../../../../plugins/jquery/jquery.min.js"></script>
        <!-- Bootstrap 4 -->
        <script src="../../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
        <!-- AdminLTE App -->
        <script src="../../../../dist/js/adminlte.min.js"></script>
        <script src="../../../../plugins/sweetalert2/sweetalert2.min.js"></script>

        <script>
            // 引入左边导航栏
            $.get("../../../../bars/User/user_sidebar.html", function (data) {
                // console.log(data)
                $("#sidebar_menu").html(data);
            })
            //引入上边导航栏 
            $.get("../../../../bars/User/user_navbar.html", function (data) {
                $("#navbar_menu").html(data);
            })
        </script>
        <script>
            let formdata = new FormData()
            let currentdata
            const Toast = Swal.mixin({
                toast: true,
                showConfirmButton: false,
                timer: 1500
                
            });
            const loading = Swal.mixin({
                allowOutsideClick: false
            })
            $("#checkInfo").on("click", function (res) {
                formdata = null
                formdata = new FormData()
                currentdata = getformdata($("form"))
                $("#check_name").text(currentdata.name)
                $("#check_gender").text(currentdata.gender)
                $("#check_tel").text(currentdata.tel)
                $("#check_address").text(currentdata.address)
                $("#check_way").text(currentdata.way)
                $("#check_model").text(currentdata.model)
                $("#check_detail").text(currentdata.detail)
                var $li = []
                for (var i = 0; i < imgSrc.length; i++) {
                    $li.push('<li style="display:flex"><img class="content-img-list-item" src="' + imgSrc[i] + '" alt=""></li>')
                }
                $li.join("")
                $(".content-img-list_show").html($li);
                $.each(imgFile, function (i, file) {
                    formdata.append('files', file);
                });
                formdata.append('name', currentdata.name);
                formdata.append('sex', currentdata.gender);
                formdata.append('address', currentdata.address);
                formdata.append('repairMethod', currentdata.way);
                formdata.append('description', currentdata.detail);
                formdata.append('telephone', "");
                formdata.append('status', "");
                formdata.append('computerType', currentdata.model);
                formdata.append('startDate', "");
            })
            $("#submitForm").on("click", function () {
                if (currentdata.name == "") {
                    $(".close").click()
                    Toast.fire({
                        icon: 'error',
                        title: ' 请输入称呼'
                    })
                } else if (currentdata.address == "") {
                    $(".close").click()
                    Toast.fire({
                        icon: 'error',
                        title: ' 请输入地址'
                    })

                } else if (currentdata.model == "") {
                    $(".close").click()
                    Toast.fire({
                        icon: 'error',
                        title: ' 请输入电脑型号'
                    })
                } else if (currentdata.detail == "") {
                    $(".close").click()
                    Toast.fire({
                        icon: 'error',
                        title: ' 请输入问题描述'
                    })
                } else {
                    Toast.showLoading()
                    $.ajax({
                        type: 'POST',
                        url: '/repair/sendRepairForm',
                        async: true,
                        dataType: "Text",
                        data:formdata,
                        crossDomain: true,
                        xhrFields: {
                            withCredentials: true
                        },
                        // contentType: "application/json;charset=UTF-8",
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            console.log(res)
                            Toast.close()
                            // console.log(res.statusCode);
                            if (JSON.parse(res).statusCode === "200") {
                                Toast.fire({
                                    icon: 'success',
                                    title: ' 报修成功'
                                })
                                setTimeout(function () { window.location.href = "/repair/history" }, 1000);
                                return false
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: ' 请重试'
                                })
                                return false
                            }
                        },
                        error: function (err) {
                            Toast.close()
                            console.log(JSON.stringify(err));
                            Toast.fire({
                                icon: 'error',
                                title: ' 请重试'
                            })
                            return false
                        }
                    });
                }
            })
            function getformdata($form) {
                var unindexed_array = $form.serializeArray();
                var indexed_array = {};
                $.map(unindexed_array, function (n, i) {
                    indexed_array[n['name']] = n['value'];
                });
                return indexed_array;
            }
        </script>
        <!-- 上传图片模块 -->
        <script>
            // 参考https://www.cnblogs.com/fozero/p/8835628.html
            var imgName = []
            var imgSrc = []
            var imgFile = []
            // 获取图片路径，用于显示缩略图
            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;

            }
            //添加一个图片预览
            function addNewContent(obj) {
                $(obj).html("");
                var $li = []
                for (var i = 0; i < imgSrc.length; i++) {
                    $li.push('<li style="display:flex"><img class="content-img-list-item" src="' + imgSrc[i] + '" index="'+i+'" alt=""><a href="javascript:void(0);" index="' + i + '" class="delete-btn"><i class="far fa-trash-alt" style="color:white;display:none;"></i></a></li>')
                }
                $li.join("")
                $(obj).html($li);
            }
            $('#upload').on('change', function (e) {
                console.log(this.files)
                var fileList = this.files;
                if (imgSrc.length + fileList.length > 3) {
                    Toast.fire({
                        icon: 'error',
                        title: ' 最多只能上传3张图片'
                    })
                    return false
                }
                if (this.files[0].size != undefined) {
                    var imgSize = this.files[0].size;  //b
                }
                if (imgSize > 1024 * 1024 * 3) {//3M
                    Toast.fire({
                        icon: 'error',
                        title: ' 上传图片不能超过3M'
                    })
                    return false
                }
                if (this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/jpg'&& this.files[0].type != 'image/gif') {
                    Toast.fire({
                        icon: 'error',
                        title: ' 图片上传格式不正确'
                    })
                    return false
                }

                for (var i = 0; i < fileList.length; i++) {
                    var imgSrcI = getObjectURL(fileList[i]);
                    imgName.push(fileList[i].name);
                    imgSrc.push(imgSrcI);
                    imgFile.push(fileList[i]);
                }
                addNewContent(".content-img-list")
            })

            $('.content-img-list').on('mouseenter', '.content-img-list-item', function () {
                // console.log("enter")
                $(this).siblings('a').addClass('showIcon').children('i').show();
            });
            $('.content-img-list').on('mouseleave', '.content-img-list-item', function () {
                // console.log("leave")
                $(this).siblings('a').removeClass('showIcon').children('i').hide();
            });

            // $(".content-img-list").on("click", '.content-img-list-item a', function () {
            //     console.log(this)
            //     var index = $(this).attr("index");
            //     imgSrc.splice(index, 1);
            //     imgFile.splice(index, 1);
            //     imgName.splice(index, 1);
            //     addNewContent(".content-img-list");
            //     // if (imgSrc.length < 4) {//显示上传按钮
            //     //     $('.content-img .file').showIcon();
            //     // }
            // });
            $(".content-img-list").on("click", '.content-img-list-item', function () {
                console.log(this)
                var index = $(this).attr("index");
                imgSrc.splice(index, 1);
                imgFile.splice(index, 1);
                imgName.splice(index, 1);
                addNewContent(".content-img-list");
                // if (imgSrc.length < 4) {//显示上传按钮
                //     $('.content-img .file').showIcon();
                // }
            });
        </script>

</body>

</html>